<template>
    <view class="orderEvaluate pb-150">
        <Navigation backType="back" title="评价" background="#fff" />

        <view class="mt-20 bg ph-32 pv-40">
            <view class="f ai-c">
                <view class="fs-28 fw-500 text-color4 mr-32">评分</view>
                <image  :src="index < param.scores ? starSelect : star" class="w-56 h-56 mr-16" v-for="(item, index) in 5" :key="index"   @click="changeStar(index)"></image>
                <!-- <view class="fs-28 fw-500 text-color4 ml-12">非常满意</view> -->
            </view>
            <view class="content b-8 ph-32 pv-28 mt-40">
                <u--textarea v-model="param.content" placeholder="请输入评价内容" border="none" count maxlength="300"></u--textarea>
                <view class="mt-28">
                    <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="9" width="73" height="73">
                        <view class="w-146 h-146 f ai-c jc-c b-8 upload fd-c">
                            <image src="http://cwht.ricecs.cn/app/mine/camera.png" class="w-48 h-42"></image>
                            <view class="fs-24 text-color3 mt-11">添加图片</view>
                        </view>
                    </u-upload>
                </view>
            </view>
        </view>
        <view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f">
            <view class="f ai-c ph-40 h-136 jc-s-b">
                <view class="w-f">
                    <u-button text="立即提交" color="#FABB3C" shape="circle" @click="toNext" ></u-button>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import star from '@/static/index/star.png';
import starSelect from '@/static/index/star-select.png';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { orderDetail,orderCommentAdd } from '@/services/api/index/index';
import { getUploadUrl } from '@/utils/env';
const fileList = ref<any[]>([]);
const id = ref<string>();
const detail = ref({});
const param = ref<any>({
	scores:0,
	content:'',
	picUrls:[],
	// visible:false,
	anonymous:1
});
onLoad((options: any) => {
    id.value = options.id;
    getDetail();
});

function changeStar(index: number) {
    param.value.scores	 = index+1;
}
//获取详情
async function getDetail() {
    const { data } = await orderDetail({ id: id.value });

	  data.scores = 0;
	  data.content = '';
	  data.picUrls = [];
    detail.value = data;
}
//提交
async function toNext() {
	let fil= ref<any[]>([])
	// console.log(fileList.value)
	  fileList.value.forEach((item: any) => {
		  fil.value.push(item.url)
	  })
	param.value.picUrls = fil.value.join(',');
	param.value.doctorId = detail.value.doctorId;
	param.value.orderId = detail.value.id;
    await orderCommentAdd( param.value);
	uni.showToast({
	    title: '评价成功',
	    icon: 'none',
	});
	uni.navigateBack()
}
// 新增图片
async function afterRead(event: any) {
    // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
    let lists = [].concat(event.file);
    let fileListLen = fileList.value.length;
    lists.map((item) => {
        fileList.value.push({
            ...item,
            status: 'uploading',
            message: '上传中',
        });
    });
    for (let i = 0; i < lists.length; i++) {
        const result = await uploadFilePromise(lists[i].url);
        let item = fileList.value[fileListLen];
        fileList.value.splice(
            fileListLen,
            1,
            Object.assign(item, {
                status: 'success',
                message: '',
                url: result,
            })
        );
		console.log(result)
        fileListLen++;
    }
}
async function uploadFilePromise(url: string) {
    return await new Promise((resolve, reject) => {
        uni.uploadFile({
            url: getUploadUrl(),
            filePath: url,
            name: 'file',
         
            success: (res) => {
                // setTimeout(() => {
                    resolve(JSON.parse(res.data).data);
                // }, 1000);
            },
        });
    });
}
//底部安全距离
const systemInfo = uni.getSystemInfoSync();
let safeArea = systemInfo.safeArea;
let screenHeight = systemInfo.screenHeight;
let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
.orderEvaluate {
    background: #f5f5f5;
    min-height: 100vh;
    .bot {
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #f5f5f5;
        ::v-deep .u-button__text {
            font-size: 32rpx !important;
            font-weight: 600 !important;
            color: #ffffff;
        }
        ::v-deep .u-button {
            height: 96rpx !important;
        }
    }
    .upload {
        border: 1rpx dashed #dddddd;
    }
    ::v-deep .u-upload__wrap__preview {
        margin: 0 10rpx 10rpx 0 !important;
    }
    ::v-deep .u-upload__wrap__preview:nth-child(4n) {
        margin: 0 0 10rpx 0 !important;
    }
    ::v-deep .u-textarea__count {
        background: #f8f8f8 !important;
        color: #cccccc !important;
        font-size: 24rpx !important;
        bottom: -16rpx;
    }

    ::v-deep .u-textarea {
        padding: 0;
    }
    ::v-deep .u-textarea__field {
        background: #f8f8f8;
        height: 220rpx !important;
        font-size: 30rpx !important;
    }
    .content {
        background: #f8f8f8;
    }
    .bg {
        background: #fff;
    }
    .discount {
        color: #f54040;
        background: #fff5f5;
    }
}
</style>
